<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style type="text/css">
      * {
        font-family: Verdana;
        font-size: 96%;
      }

      label {
        width: 10em;
        float: left;
      }

      label.error {
        float: none;
        color: red;
        padding-left: 0.5em;
        vertical-align: top;
      }

      p {
        clear: both;
      }

      .submit {
        margin-left: 12em;
      }

      em {
        font-weight: bold;
        padding-right: 1em;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <form class="cmxform" id="commentForm" method="get" action="">
      <fieldset>
        <legend>一个简单的验证带验证提示的评论例子</legend>
        <p>
          <label for="cusername">姓名</label>
          <em>*</em><input id="cusername" name="username" size="25" />
        </p>
        <p>
          <label for="cemail">电子邮件</label>
          <em>*</em><input id="cemail" name="email" size="25" />
        </p>
        <p>
          <label for="curl">网址</label>
          <em> </em><input id="curl" name="url" size="25" value="" />
        </p>
        <p>
          <label for="ccomment">你的评论</label>
          <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
        </p>
        <p>
          <input class="submit" type="submit" value="提交" />
        </p>
      </fieldset>
    </form>

    <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script src="../static/plugins/jquery/jquery-validate-1.19.min.js"></script>
    <script src="../static/plugins/jquery/jquery.metadata.js"></script>
    <script>
      $(function () {
        //利用jquery validate插件进行表单验证
        $("#commentForm").validate({
          rules: {
            username: {
              required: true,
              minLength: 4,
            },
            email: {
              required: true,
              email: true,
            },
            url: {
              required: true,
            },
            comment: {
              required: true,
            },
          },
        });
      });
    </script>
  </body>
</html>
